<template>
  <div class="container">
    <span style="font-size: 36px;font-weight: 600;">{{ $t('workStation.workStationType1') }}</span>
    <el-row :gutter="15" style="margin-top: 20px;">
      <el-col v-for="item in list" :key="item.workstationCode" :xl="6" :lg="6" :md="8" :sm="12" :xs="24" style="margin-bottom: 15px;">
        <el-card class="task-item" shadow="hover" @click.native="goControl(item)">
          <h2>{{ item.id }}</h2>
          <ul>
            <li>
              <h4>{{ $t('workStation.workStationType') }}</h4>
              <p>{{ item.stationType === '1' ? $t('workStation.workStationType1') : $t('workStation.workStationType2') }}</p>
            </li>
            <li>
              <h4>{{ $t('workStation.stationCode') }}</h4>
              <p>{{ item.stationCode }}</p>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <span style="font-size: 36px;font-weight: 600;">{{ $t('workStation.workStationType2') }}</span>
    <el-row :gutter="15" style="margin-top: 20px;">
      <el-col v-for="item in list1" :key="item.workstationCode" :xl="6" :lg="6" :md="8" :sm="12" :xs="24" style="margin-bottom: 15px;">
        <el-card class="task-item" shadow="hover" @click.native="goControl(item)">
          <h2>{{ item.id }}</h2>
          <ul>
            <li>
              <h4>{{ $t('workStation.workStationType') }}</h4>
              <p>{{ item.stationType === '1' ? $t('workStation.workStationType1') : $t('workStation.workStationType2') }}</p>
            </li>
            <li>
              <h4>{{ $t('workStation.stationCode') }}</h4>
              <p>{{ item.stationCode }}</p>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getWorkStation } from '@/api/workStation'
export default {
  data() {
    return {
      list: [],
      list1: []
    }
  },
  mounted() {
    this.getWorkStationList()
  },
  methods: {
    goControl(item) {
      if (item.stationType === '1') {
        this.$router.push({
          path: '/laminationManagement/laminationCraft',
          query: {
            stationCode: item.stationCode
          }
        })
      } else {
        this.$router.push({
          path: 'laminationManagement/Dismantling',
          query: {
            stationCode: item.stationCode
          }
        })
      }
    },
    getWorkStationList() {
      getWorkStation().then(res => {
        this.list = res.data.allStation.filter(v => {
          return v.stationType === '1'
        })
        this.list1 = res.data.allStation.filter(v => {
          return v.stationType === '2'
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin: 0;
  padding: 20px;
  cursor: pointer;
}
.form {
  margin-top: 20px;
}
::v-deep .el-card__body, .el-main {
  padding: 0px;
}
.container {
  width: 100%;
  padding: 15px;
}
.task {
  height: 210px;
}
.task-item {
  height: 210px;
    h2 {
      font-size: 20px;
      color: #3c4a54;
      padding-bottom:15px;
      margin: 0;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      list-style-type:none;
      margin-bottom: 10px;
      h4 {
        font-size: 16px;
        font-weight: normal;
        color: #999;
        margin: 0;
      }
      p {
        margin-top: 5px;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .bottom {
      border-top: 1px solid #EBEEF5;
      text-align: right;
      padding-top:10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-button {
        margin: 0 3px;
      }
    }
}
.dark {
  .task-item {
    .bottom {
      border-color: var(--el-border-color-light);
    }
  }
}
</style>
